<template>
  <div class="RecommendNav">
    <div class="title_nav">
      <div class="title">
        <h2 class="english">recommend cases</h2>
        <h2 class="first">推荐案例</h2>
        <h3 class="second">专业服务，创新空间，实现新价值</h3>
      </div>
      <nav>
        <ul>
          <li class="active">所有</li>
          <li>办公</li>
          <li>教育</li>
          <li>餐饮</li>
          <li>会所</li>
          <li>酒店</li>
          <li>商业</li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.title_nav {
  margin: 0 auto;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    position: relative;
    font-size: 24px;
    padding-bottom: 25px;
    margin-bottom: 20px;
    text-transform: capitalize;
    position: relative;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.1;
    .english {
      text-transform: uppercase;
      font-size: 14px;
      font-weight: 500;
      color: #da1a45;
      margin-bottom: 10px;
    }
    .second {
      font-size: 20px;
      font-weight: 500;
      margin-top: 15px;
    }
    &::after {
      content: "";
      width: 80px;
      height: 2px;
      background: #da1a45;
      position: absolute;
      top: 101%;
      left: 0;
    }
  }
  nav {
    margin-left: auto;
    ul {
      display: flex;
      li {
        position: relative;
        font-size: 13px;
        font-weight: 500;
        color: #888;
        margin-right: 8px;
        padding: 9px 23px;
        border: 1px solid #da1a45;
        border-radius: 30px;
        border: 1px solid #dedede;
        background: transparent;
        cursor: pointer;
        &.active {
          color: #fff;
          cursor: pointer;
          background: #da1a45;
          border-color: #da1a45;
        }
      }
    }
  }
}
</style>
